<template>
  <div class="enshrine-container">
    <!-- <van-list :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
    <div v-for="(item, index) in list" :key="index" class="enshrine-list">
      <div class="list-left">
        <template v-if="item.desc == 0">
          <img class="left-img" src="@/assets/img/ty.jpg">
        </template>
        <template v-else>
          <img class="left-img" :src="item.dinImg">
        </template>
      </div>
      <div class="list-center">
        <div style="font-size:15px">{{ item.dinName }}</div>
        <div style="color:#8a8a8a;" v-if="item.desc == 0">通用券</div>
        <div style="color:#8a8a8a;" v-if="item.desc == 1 ">满{{ item.total }}减券</div>
        <div style="color:#8a8a8a;">{{ item.time }}--{{ item.stopTime }}</div>
        <div class="list-money">￥{{ item.money }}</div>
        <div class="border-top"></div>
        <div class="border-bottom"></div>
      </div>
    </div>
    <!-- </van-list> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      finished: false
    };
  },
  created() {
    this.getlist();
  },
  activated() {
    this.getlist();
  },
  methods: {
    onBtn(e) {
      let index = e.currentTarget.getAttribute("index");
      console.log(this.list[index]);
    },
    getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid")
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/myCoupon/query", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              if (res.data.data == "查无数据") {
                that.list = [];
                that.$toast({
                  message: "暂无优惠券"
                });
              } else {
                that.list = res.data.data;
                that.$toast.clear();
              }
              console.log(res.data);
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push({
            title: `美食小铺--${i}`,
            img: require("@/assets/img/img1_cd.png"),
            time: `2018年01月${i}日--2018年01月${i}日`,
            rate: "商品满减券",
            money: `1${i}`
          });
        }
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  }
};
</script>
<style scoped>
.border-top {
  position: absolute;
  width: 8px;
  height: 4px;
  border: #ff2f4e solid 2px;
  background: #fff;
  border-top: none;
  border-radius: 0 0 8px 8px;
  right: 50px;
  top: -2px;
}

.border-bottom {
  position: absolute;
  width: 8px;
  height: 4px;
  border: #ff2f4e solid 2px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  right: 50px;
  bottom: -2px;
}

.list-money {
  color: #ff2f4e;
  font-size: 30px;
  position: absolute;
  right: 20px;
  top: 10px;
}

.enshrine-container {
  font-size: 0.3rem;
  width: 100%;
}

.enshrine-list {
  display: flex;
  justify-content: space-between;
  margin: 5px 6px;
  border-color: #ff2f4e;
  border-style: solid dotted;
  border-width: 2px 1px;
  box-sizing: border-box;
}

.list-left {
  text-align: center;
  width: 30%;
}

.list-center {
  position: relative;
  text-align: left;
  width: 68%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  border-right: #ff2f4e 2px solid;
}

.left-img {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  border: #ff2f4e 3px solid;
}
</style>
